<template>
   <div class="templet w1190">
       <h2 class="commonTitle">合同模板</h2>
       <div class="clearfix templateBot">
           <div class="pull-left templetLeft">
               <ul class="leftUl">
                   <li class="leftLi" v-for="item in templettitle" :key="item.id">
                      <!-- <img :src="con1" alt=""> -->
                      <a :class="{ red : isRed === item.typeId }" @click="titlelist(item)">{{item.typeName}}</a>
                   </li>
                   <!-- <li class="leftLi"><a :class="{ red : all }" @click="linkToPage('Home')">全部</a></li>
                   <li class="leftLi"><a :class="{ red : work }" @click="linkToPage('Home')">劳动合同</a></li>
                   <li class="leftLi"><a :class="{ red : knowledge }" @click="linkToPage('Home')">知识产权</a></li>
                   <li class="leftLi"><a :class="{ red : rent }" @click="linkToPage('Home')">租赁合同</a></li>
                   <li class="leftLi"><a :class="{ red : lend }" @click="linkToPage('Home')">借贷服务</a></li>
                   <li class="leftLi"><a :class="{ red : entrust }" @click="linkToPage('Home')">委托代理</a></li>
                   <li class="leftLi"><a :class="{ red : mortgage }" @click="linkToPage('Home')">抵押担保</a></li> -->
               </ul>
           </div>
           <div class="pull-right templetRight">
               <ul class="rightUl">
                   <li class="rightLi pull-left" v-for="item in templetItems" :key="item.id">
                       <a @click="templateTetails">
                         <div class="contract">{{item.contractName}}</div>
                         <p class="download">下载数：<template v-if='item.downloadNo === null'>0</template><template v-else>{{item.downloadNo}}</template></p>
                       </a>
                    </li>
               </ul>
           </div>
           {{posts}}
           <div class="clearfix"></div>
           <div class="page pull-right">
            <div class="page" v-if='pagebool'>
              <Page :total="total" show-total show-elevator @on-change="pagenum" :page-size='count'></Page>
            </div>
           </div>
       </div>
   </div>
</template>
<script>
// import con1 from "@/assets/img/con01.png";
import axios from 'axios'
export default {
  async asyncData () {
    let { data } = await axios({
      method: 'post',
      url: 'http://www.qnfamily.com/api/mobile/goods/page.jhtml',
      data: {
        'pageNumber': 1,
        'pageSize': 10,
        'cityCode': '0571',
      }
    })
    return { posts: data }
  },
  data() {
    return {
      // id: this.$cookie.get("id"),
      page: 1,
      count: 5,
      type: "",
      total: 0,
      isRed: "",
      pagebool: true,
      //1.全部
      all: true,
      //2.劳动合同
      work: false,
      //3.知识产权
      knowledge: false,
      //4.租赁合同
      rent: false,
      //5.借贷服务
      lend: false,
      //6.委托代理
      entrust: false,
      //7.抵押担保
      mortgage: false,
      yyt1: "",
      yyt2: "",
      //模板分类
      templettitle: [],
      //模板
      templetItems: [],
      goodlist: []
    };
  },
  created() {
    // this.templatelist();
  },
  methods: {
    templatelist() {
      let ths = this;
      ths
        .post("/template/getContractTemp", {
          type: ths.type,
          page: ths.page,
          count: ths.count,
        })
        .then(data => {
          if (data.responseCode === "100000") {
            let all = {};
            all.id = "";
            // 合同类型标识是  typeId 区分的
            all.typeId = "";
            all.typeName = "全部合同";
            if (data.result.typeList) {
              ths.templettitle = data.result.typeList;
            }
            ths.templettitle.unshift(all);
            ths.templetItems = data.result.ContractTempList;
            ths.total = parseInt(data.result.tempTotal);
          }
        });
    },
    //页码跳转
    pagenum(num) {
      this.page = num;
      this.templatelist();
    },
    //模板分类查询
    titlelist(item) {
      let ths = this;

      // 进行赋值
      ths.type = item.typeId;
      ths.isRed = item.typeId;

      ths.page = 1;
      ths.pagebool = false;
      setTimeout(function() {
        ths.pagebool = true;
      }, 0);
      ths.templatelist();
    },
    //详情页面
    templateTetails() {
      let ths = this;
      ths.$router.push({ name: "templetChild" });
    },
    //跳转页面
    linkToPage(name) {
      let ths = this;
      switch (name) {
        // 首页
        case "Home":
          ths.all = false;
          ths.work = true;
          ths.knowledge = false;
          ths.rent = false;
          ths.lend = false;
          ths.entrust = false;
          ths.mortgage = false;
          ths.$router.push({ name: "templet" });
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="less">
.templet {
  padding-top: 60px;
  .templateBot {
    margin: 60px auto 55px auto;
    .templetLeft {
      .leftUl {
        .leftLi {
          width: 135px;
          height: 40px;
          text-align: center;
          border: 1px solid #eeeeee;
          border-bottom: none;
          &:last-child {
            border-bottom: 1px solid #eeeeee;
          }
          &:hover {
            background: #f6f6f6;
          }
          a {
            color: #6a6a6a;
            font-size: 1.6rem;
            line-height: 40px;
            display: block;
            width: 100%;
            height: 100%;
            // &:hover {
            //   color: #e8272b;
            // }
          }
          .red {
            color: #e8272b;
          }
        }
      }
    }
    .templetRight {
      width: 1005px;
      .rightUl {
        .rightLi {
          border: 1px solid #eeeeee;
          margin: 0 49px 35px 0;
          a {
            padding: 25px 30px;
            display: block;
            color: #3a3a3a;
            font-size: 1.4rem;
            .contract {
              width: 90px;
              height: 115px;
              line-height: 115px;
              text-align: center;
              border: 1px dashed #d6dcd8;
              background: #e6ebf1;
              overflow: hidden;
            }
            .download {
              color: #9a9a9a;
              font-size: 1.2rem;
              line-height: 10px;
              margin-top: 12px;
            }
          }
        }
      }
    }
    .page{
      font-size:1.4rem;
    }
  }
}
</style>



